<template>
  <a-modal
    title="添加新考生"
    :width="640"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="close"
  >
    <detail-list size="small" :col="2" class="detail-layout">
      <detail-list-item
        v-for="item in columns"
        :key="item.value"
        :term="item.label">
        <div v-if="item.value==='imgUrl'">
          <img style="cursor:zoom-in;" width="64" height="64" :src="record[item.value]" @click="handlePreview(record[item.value])"/>
        </div>
        <div v-else-if="item.value==='pay'">{{ record[item.value]?'已支付':'未支付' }}</div>
        <div v-else>{{ record[item.value] }}</div>
      </detail-list-item>
    </detail-list>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </a-modal>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import DetailList from '@/components/tools/DetailList'
import signUpEnum from '../../../utils/signUpEnum'

const DetailListItem = DetailList.Item

export default {
  name: 'Advanced',
  components: {
    DetailList,
    DetailListItem
  },
  mixins: [mixinDevice],
  data () {
    return {
      record: [],
      visible: false,
      confirmLoading: false,
      previewImage: '',
      previewVisible: false,
      columns: signUpEnum
    }
  },
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handleSubmit () {

    },
    handlePreview (url) {
      this.previewImage = url
      this.previewVisible = true
    },
    close () {
      this.visible = false
    }
  }
}
</script>
